<template>
    <ul class="component-box">
        <li v-for="item in listData" :key="item.text" class="list-item">
            <a :href="item.href">{{ item.text }}</a>
            <span>{{ item.date.substring(5, 10) }}</span>
        </li>
    </ul>
</template>

<script setup lang="ts">
const listData = [
    { href: "https://www.scvtc.edu.cn/info/1047/23113.htm", text: "我校运动队在2023年四川省大学生系列体育比赛中喜获佳绩", date: "2023-06-14" }
    , { href: "https://www.scvtc.edu.cn/info/1047/23107.htm", text: "我校荣获2023年第四届全国供应链大赛二等奖", date: "2023-06-14" }
    , { href: "https://www.scvtc.edu.cn/info/1047/23106.htm", text: "智能制造学院在第十六届全国大学生先进成图技术大赛四川省选拔赛中喜获佳绩", date: "2023-06-14" }
    , { href: "https://www.scvtc.edu.cn/info/1047/23103.htm", text: "我校喜获第二十二届全国大学生机器人大赛ROBOTAC全国二等奖", date: "2023-06-13" }
    , { href: "https://www.scvtc.edu.cn/info/1047/23101.htm", text: "建筑工程学院成功举办“2023年遂宁市大学生建筑施工测量技能大赛”", date: "2023-06-13" }];
</script>

<style scoped lang="scss">
.component-box {

    margin-top: 20px;
    .list-item {
        display: flex;
        justify-content: space-between;
        line-height: 49px;
        border-bottom: 1px solid #ebf1f7;
        background-image: url("https://www.scvtc.edu.cn/images/dtd-left.png");
        background-position: left center;
        background-repeat: no-repeat;
        padding-left: 20px;

        span {
            width: 45px;
            flex-shrink: 0;
            color: #8b8989
        }

        &:hover>a {
            color: #940708;
            font-weight: 700;
        }

        &:nth-child(1) {
            border-top: 1px solid #ebf1f7;
        }
    }

}
</style>